<template>
  <div>
    <h1>{{course_name}}的课程信息</h1>
    <score-weight :courseid="course_id"></score-weight>


    <el-button @click="calculate">计算</el-button>
    <el-button @click="addOne">增加</el-button>
<!--    <el-button @click="deleteAll">批量删除</el-button>-->

    <el-table
      :data="tableData"
      height="500"
      border
      @selection-change="handleSelectionChange"
      style="width: 100%">
  <!--    <el-table-column-->
  <!--      label="日期"-->
  <!--      width="180">-->
  <!--      <template slot-scope="scope">-->
  <!--        <i class="el-icon-time"></i>-->
  <!--        <span style="margin-left: 10px">{{ scope.row.date }}</span>-->
  <!--      </template>-->
  <!--    </el-table-column>-->

      <el-table-column type="selection"></el-table-column>
      <el-table-column type="index"></el-table-column>

      <el-table-column
        label="学号"
        prop = "student_id"
        width="180">
        <template slot-scope="scope">
         <span v-if="scope.row.show">
            <el-input size="middle" placeholder="请输入学号" v-model="scope.row.student_id"></el-input>
          </span>
          <span v-else>{{scope.row.student_id}}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="姓名"
        prop = "student_name"
        width="180">
        <template slot-scope="scope">
          <span v-if="scope.row.show">
            <el-input size="middle" placeholder="请输入姓名" v-model="scope.row.student_name"></el-input>
        </span>
          <span v-else>{{scope.row.student_name}}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="总成绩"
        prop = "score"
        width="100">
      </el-table-column>

      <el-table-column
        label="缺勤"
        prop = "absent_num"
        width="100">
        <template slot-scope="scope">
         <span v-if="scope.row.show">
            <el-input size="middle" placeholder="请输入缺勤次数" v-model="scope.row.absent_num"></el-input>
          </span>
          <span v-else>{{scope.row.absent_num}}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="平时成绩"
        prop = "homework_score"
        width="100">
        <template slot-scope="scope">
         <span v-if="scope.row.show">
            <el-input size="middle" placeholder="请输入平时成绩" v-model="scope.row.homework_score"></el-input>
          </span>
          <span v-else>{{scope.row.homework_score}}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="期中成绩"
        prop = "mid_score"
        width="100">
        <template slot-scope="scope">
         <span v-if="scope.row.show">
            <el-input size="middle" placeholder="请输入期中成绩" v-model="scope.row.mid_score"></el-input>
          </span>
          <span v-else>{{scope.row.mid_score}}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="期末成绩"
        prop = "final_score"
        width="100">
        <template slot-scope="scope">
         <span v-if="scope.row.show">
            <el-input size="middle" placeholder="请输入期末成绩" v-model="scope.row.final_score"></el-input>
          </span>
          <span v-else>{{scope.row.final_score}}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
<!--          <el-button @click="edit(scope.row,scope.$index)">{{scope.row.show?'保存':"修改"}}</el-button>-->
          <el-button @click="edit(scope.row,scope.$index)">修改</el-button>
          <el-button @click="saveLine(scope.row)">保存</el-button>
<!--          <el-button @click="cope(scope.row,scope.$index)">单个复制</el-button>-->
          <el-button @click="delect(scope.row,scope.$index)">单个删除</el-button>
  <!--        <el-button-->
  <!--          size="mini"-->
  <!--          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
  <!--        <el-button-->
  <!--          size="mini"-->
  <!--          type="danger"-->
  <!--          @click="handleDelete(scope.$index, scope.row)">删除</el-button>-->
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import scoreWeight from '../../components/scoreWeight'
import api from '../../tool/user'
export default {
  name: "courseList",//选修该课学生列表
  props:['user_name','course_id','course_name'],
  components: {
    scoreWeight
  },
  inject:['reload'],
  data() {
      return {
        tableData: [],
        multipleSelection: [],
        course_id: this.course_id,
        student_id: '',
        student_name: '',
        absent_num: '',
        homework_score: '',
        mid_score: '',
        final_score:''
      }
    },
  created() {
    this.tableData = []
    this.tableData.map(i => {
        i.show = false
        return i
    })
    console.log("tableData init")
  },
  mounted() {
    this.fetchList()
  },

//   },
//   activated () {
//       this.fetchList()
// 　},
  methods: {
      // handleEdit(index, row) {
      //   console.log(index, row);
      // },
      // handleDelete(index, row) {
      //   console.log(index, row);
      // }
    //添加
    fetchList() {
      console.log("fetchlist");
      this.axios
        .get("http://localhost:8000/user/getStudent/?course_id="+ this.course_id) // *课程主键
        .then(
          response => {
            console.log("response is :");
            console.log(response.data);
            console.log(response.data.data.studentlist);
            if (response.data.code === 20000) {
              console.log(response.data.data.studentlist);
              this.tableData = response.data.data.studentlist;//response.data.studentlist
              console.log(this.tableData);
              console.log(scope.row);
            }
          }).catch(function (error) {
            console.log(error);
          })
    },

    edit(row, index) {//
        row.show = !row.show
        this.$set(this.tableData, index, row)
        console.log(row);
        //传后端
        // 修改后保存
    },
    async saveLine(row) {
      this.student_id = row.student_id;
      this.student_name = row.student_name;
      this.absent_num = row.absent_num;
      this.homework_score = row.homework_score;
      this.mid_score = row.mid_score;
      this.final_score = row.final_score;
      let response = await api.addSingle(this.$data)//加课;
      if (response.data.code === 20000) {
        console.log("reload");
        this.reload();
      }
      console.log("shuaxin");
      // this.$router.go(0);
    },
    // editAll() {
    //     this.tableData.map((i, index) => {
    //         i.show = true
    //         Vue.set(this.tableData, index, i)
    //     })
    // },
    async calculate() {//提交所有表格数据到后端  jisuan
      this.tableData.map((i, index) => {
        i.show = false
        this.$set(this.tableData, index, i)
      })
      console.log(this.tableData);
      let res = await api.calculation(this.$data);
      console.log(res.data.code);
      this.reload();
      // if (res.data.code === 20000) {
      //   console.log("reload");
      //   this.reload();
      // }
      //shuaxin
      // this.fetchList();
      // this.reload();
      // this.$router.go(0);
    },
    // // 单个复制
    // cope(val, index) {
    //     this.tableData.splice(index, 0,JSON.parse(JSON.stringify(val)))
    // },
    // 单个删除
    async delect(row, index) {
      //
      this.student_id = row.student_id;
      this.tableData.splice(index, 1);
      console.log("table after delete spilce:");
      console.log(this.tableData);
      this.student_id = row.student_id;
      let res = await api.delSingle(this.$data);
      console.log("table after delete api:");
      console.log(this.tableData);
      if (res.data.code === 20000) {
        console.log("reload");
        this.reload();
      }
      // this.$router.push({name: 'courselist', params: {user_name: this.user_name, course_id:this.course_id, course_name: this.course_name}});

      // this.reload();
      // this.$router.go(0);
    },
    //新增一个栏目行
    addOne() {
        if (this.multipleSelection.length === 0) {
            console.log("addOne!");
            let list = {
                student_id: "",
                student_name: "",
                score: "",
                absent_num: "",
                homework_score: "",
                mid_score: "",
                final_score: ""
                // people: "",
                // name: ""
            }
            console.log("addone table is " + this.tableData);
            this.tableData.push(list)
        } else {
            this.multipleSelection.forEach((val, index)=> {
            this.tableData.splice(index, 0,JSON.parse(JSON.stringify(val)))
            });
        }
    },
    // //批量删除
    // deleteAll() {
    //     for (let i = 0; i < this.tableData.length; i++) {
    //         const element = this.tableData[i];
    //         element.id = i
    //     }
    //     if (this.multipleSelection.length === 0) this.$message.error('请先至少选择一项')
    //     this.multipleSelection.forEach(element => {
    //         this.tableData.forEach((e, i) => {
    //             if (element.id === e.id) {
    //                 this.tableData.splice(i, 1)
    //             }
    //         });
    //     });
    // },
    //选
    handleSelectionChange(val) {
        this.multipleSelection = val;
    }
  }
}
</script>

<style scoped>

</style>
